<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" name="a" id="a" value="basketball" v-model="selected"/>
			<label for="a">篮球</label> <br />
			<input type="checkbox" name="b" id="b" value="football"  v-model="selected"/>
			<label for="b">足球</label> <br />
			<input type="checkbox" name="c" id="c" value="badminton"  v-model="selected"/>
			<label for="c">羽毛球</label> <br />
			<hr />
			<input id="all" type="checkbox" @change="selectAll" v-model="isCheck"/>
			<label for="all">全选</label> <br />
			<p>{{selected}}</p>
		</div>
	</body>
</html>

<script type="text/javascript">
	const vm = new Vue({
		el:'#app',
		data: {
			list: [ "basketball", "football", "badminton" ],
			selected: [],
			isCheck: false
		},
		methods: {
			selectAll() {
				if (this.isCheck) {
					this.selected = this.list;
				} else {
					this.selected = [];
				}
			}
		}
	})
</script>
